<template>
	<view class="total">
		
		<view class="order_detail">
			<view class="title">
				<view class="left">
					<view class="status">
						<text class="status_text">{{ statusToString(orderInfo.status) }}</text>
					</view>
					<view class="message">
						<text class="message_text">如未取餐，请及时到店领取，祝您用餐愉快</text>
					</view>
				</view>
				<view class="right">
					<image class="xuewang" src="../../static/xuewang.png"></image>
				</view>
			</view>
			<view class="second">
				<view class="content">
					<view class="shop">
						<text class="shop_text">{{ orderInfo.shop }} ></text>
					</view>
					<view class="detail">
						<text class="detail_text">{{detail}}</text>
						<image class="icon" src="../../static/Fig.png"></image>
					</view>
					<view v-for="(item,index) in orderInfo.shoppingCartVoList" :key="item.id">
						<hr class="hr1">
						<view class="order">
							<image class="goodImg" :src="item.imgUrl"></image>
							<view class="orderMsg">
								<view><text class="goodname">{{item.name}}</text></view>
								<view>
									<text class="size">{{item.size}}/</text>
									<text class="ice">{{item.ice}}/</text>
									<text class="sweet">{{item.sweet}}</text>
								</view>
								<view><text class="num">×{{ item.num }} </text></view>
							</view>
							<text class="money">￥{{item.amount}}</text>
						</view>
					</view>
					<hr class="hr2">
					<view class="end">
						<text class="end_msg">共{{orderInfo.goodNum}}件，合计</text>
						<text class="end_money">￥{{orderInfo.amount}}</text>
					</view>
				</view>
				<view class="carousel">
					<swiper
					    circular
					    indicator-dots
					    autoplay
					    interval="3000"
					    style="width: 100%; height: 100px; background-color: #F5F5F5; overflow: hidden; border-radius: 15px;"
					>
					    <swiper-item style="" v-for="(item, index) in articles" :key="index" @click="gotoOrder">
					        <image style="border-radius: 15px;" :src="item.cover" mode="htightFix" class="sweet"></image>
					    </swiper-item>
					</swiper>
					<!-- <text>我是轮播图</text> -->
				</view>
				<view class="footer">
					<view class="time">
						<text class="time_text1">下单时间&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{orderInfo.time}}</text>
					</view>
					<view class="number">
						<text class="num_text1">订单编号&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{orderInfo.orderNumber}}</text>
					</view>
					<view class="pickup">
						<text class="pickup_code">取餐号码&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{String(orderInfo.pickupCode).padStart(4, '0')}}</text>
					</view>
					<view class="notes">
						<text class="notes_text">备注&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{notesToString(orderInfo.notes)}}</text>
					</view>
				</view>
			</view>
			<view class="anothorOne">
				<button @click="gotoOrder" class="anothorBtn">再来一单</button>
				<button @click="changeOrderStatus(1)" class="anothorBtn">已 取</button>
				<button v-if="orderInfo.status!=-1" @click="changeOrderStatus(-1)" class="anothorBtn">退 单</button>
			</view>
		</view>
	</view>
</template>


<script>
	import {baseUrl} from "../../utils/request.js";
	export default{
		data(){
			return{
				detail: "直线距离3.1km|浙江省杭州市临安区锦北街道武肃街666号农林大学东湖校区C6J01",
				statusBarHeight: uni.db.statusbarhright,
				images:[
					// {id: 1, imgurl: '../../static/Fig.png'},
					// {id: 2, imgurl: '../../static/bag_2.png'},
					// {id: 3, imgurl: '../../static/cake.png'},
				],
				articles: null,
				order_id: null,
				orderInfo: null,
			}
		},
		onLoad(options) {
			console.log(options.id)
			this.order_id = options.id
			console.log(this.order_id)
			this.getOrderById(this.order_id)
		    uni.request({
		        url: 'https://www.fastmock.site/mock/68c3c014a443685834fb331ec92e7e9d/show/show',
		        success: (res) => {
		            // console.log(res.data.data[0].articles);
		            this.setData({
		                articles: res.data.data[0].articles
		            });
		        }
		    });
		},
		mounted() {
			
		},
		methods:{
			changeOrderStatus(status){
				// console.log('finishOrder')
				this.orderInfo.status = status
				uni.request({
					method:"PUT",
				    url: baseUrl + `/mixuebingcheng/test`,
					data: this.orderInfo,
				    success: (res) => {
				        uni.switchTab({
				        	url: '/pages/form/form'
				        })
				    }
				});
			},
			backof() {
			    uni.navigateBack({
			        delta: 1
			    });
			},
			
			gotoOrder(){
				uni.switchTab({
					url: '/pages/newoder/newoder'
				})
			},
			
			// 函数功能：判定 method 返回的值，0：自取，1：外送
			methodToString(a){
				if(a == 0) return "自取";
				return "外送";
			},
			
			// 函数功能：判定 status 返回的值：0：制作中，1：已完成
			statusToString(a){
				if(a == 0) return "制作中";
				return "订单已完成";
			},
			
			// 函数功能：判定后端传来的 notes 是否为空，为空则返回 "空"，否则返回原内容
			notesToString(note){
				if(note == null) return "无"
				return note
			},
			
			// 根据 id 获取订单信息
			getOrderById(id) {
			  uni.request({
			      url:baseUrl + `/mixuebingcheng/test/${id}`,
			      success: (res) => {
					  this.setData({
					      orderInfo: res.data.data
					  });
					  console.log(this.orderInfo);
			      }
			  });
			},
		}
	}
</script>


<style>
	.header {
	    height: 80rpx;
	    text-align: center;
	    font-weight: bolder;
	    line-height: 80rpx;
	    background: #F33A36;
	    border-top-left-radius: 30rpx;
	    border-top-right-radius: 30rpx;
	    display: flex;
	    justify-content: left;
	    padding: 0 30rpx;
	}
	.total{
		height: 100%;
		background-color: #F33A36;
	}
	.title{
		display: flex;
		height: 100px;
	}
	.left{
		flex: 3;
		/* background-color: antiquewhite; */
	}
	.right{
		flex: 1;
		/* background-color: #F86C3F; */
	}
	.xuewang{
		width: 60px;
		height: 56px;
		position: relative;
		top: 44px;
	}
	.status{
		padding-top: 10px;
		padding-left: 10px;
		padding-bottom: 10px;
		font-size: 18px;
		font-weight: bold;
		color: white;
	}
	.message{
		padding-left: 10px;
		color: white;
		font-weight: bold;
		font-family: SimHei;
	}
	.second{
		background-color: #F5F5F5;
		border-radius: 10px 10px 0 0;
		padding-top: 10px;
		padding-bottom: 10px;
	}
	.content{
		padding-top: 10px;
		padding-left: 10px;
		padding-right: 10px;
		
		border-radius: 10px;
		margin-left: 10px;
		margin-right: 10px;
		background-color: #FFFFFF;
	}
	.detail{
		display: flex;
	}
	.detail_text{
		flex: 5;
		/* background-color: aquamarine; */
		margin-right: 20px;
		margin-top: 6px;
		font-size: 12px;
		color: #777777;
	}
	.icon{
		flex: 1;
		width: 100px;
		height: 50px;
		background-color: antiquewhite;
	}
	.hr1{
		margin-bottom: 10px;
		margin-top: 10px;
		border-color: #F5F5F5;
		border-style: dashed;
	}
	.order{
		display: flex;	
	}
	.goodImg{
		margin-right: 8px;
		background-color: antiquewhite;
		flex: 1;
		width: 100px;
		height: 60px;
	}
	.orderMsg{
		flex: 4;
	}
	.money{
		flex: 1;
		/* background-color: antiquewhite; */
	}
	.hr2{
		margin-top: 10px;
		border-color: #F5F5F5;
		border-style: dashed;
	}
	.end{
		text-align: right;
		margin-bottom: 10px;
		padding-bottom: 10px;
		margin-top: 10px;
		margin-right: 10px;
	}
	.end_money{
		font-weight: bold;
		font-size: 18px;
	}
	.carousel{
		background-color: antiquewhite;
		height: 80px;
		border-radius: 10px;
		margin-left: 10px;
		margin-right: 10px;
		margin-bottom: 30px;
	}
	.sweet{
		height: 100px;
		width: 100%;
	}
	.slide-image{
		width: 250px;
		height: 80px;
	}
	.footer{
		background-color: #FFFFFF;
		border-radius: 10px;
		margin-left: 10px;
		margin-right: 10px;
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 10px;
		padding-bottom: 10px;
	}
	.time{
		font-size: 13px;
		margin-bottom: 6px;
	}
	.number{
		font-size: 13px;
		margin-bottom: 6px;
	}
	.pickup{
		font-size: 13px;
		margin-bottom: 6px;
	}
	.notes{
		font-size: 13px;
		margin-bottom: 6px;
	}
	.anothorOne{
		background-color: #FFFFFF;
	}
	.anothorBtn{
		display: inline-block;
		float: right;
		margin-right: 10px;
		width: 90px;
		background-color: #FFFFFF;
		border: 1px solid red;
		color: red;
		height: 38px;
		font-size: 15px;
	}
</style>